<template>
  <div class="main-container menu-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-notebook-2" /> 权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="table-top-bar">
        <el-button v-auth="'AddMenu'" type="primary" size="mini" @click="addMenuVisible = true">添加菜单</el-button>
      </div>
      <zk-table
        ref="treeTable"
        stripe
        children-prop="children"
        :is-fold="false"
        :expand-type="false"
        :selection-type="false"
        :data="menus"
        :columns="columns"
      >
        <template slot="menu_type" scope="scope">
          <el-tag v-if="scope.row.menu_type == 1" type="success">菜单</el-tag>
          <el-tag v-if="scope.row.menu_type == 2" type="danger">按钮</el-tag>
        </template>
        <template slot="icon" scope="scope">
          <i :class="scope.row.icon" class="iconfont" />
        </template>
        <template slot="status" scope="scope">
          <template v-if="scope.row.menu_type === 1">
            <el-button v-if="scope.row.status === 1" size="mini" type="primary" @click="menuStatus(scope.row, 0, '隐藏')">显示</el-button>
            <el-button v-if="scope.row.status === 0" size="mini" type="info" @click="menuStatus(scope.row, 1, '显示')">隐藏</el-button>
            <el-button v-if="scope.row.status === -1" size="mini" type="info" @click="menuStatus(scope.row, 1, '恢复')">已删除</el-button>
          </template>
        </template>
        <template slot="operating" scope="scope">
          <template v-if="scope.row.status === 1 || scope.row.status === 0">
            <el-button v-auth="'EditMenu'" size="mini" @click="menuEdit(scope, scope.row)">编辑</el-button>
            <el-button v-auth="'DelMenu'" size="mini" type="danger" @click="menuStatus(scope.row, -1, '删除')">删除</el-button>
          </template>
        </template>
      </zk-table>
    </el-card>
    <el-dialog v-dialogDrag title="添加菜单" :visible.sync="addMenuVisible" width="50%" :close-on-click-modal="false">
      <add-menu v-if="addMenuVisible" @reset-menus="resetMenus" />
    </el-dialog>
    <el-dialog v-dialogDrag title="编辑菜单" :visible.sync="editMenuVisible" width="50%" :close-on-click-modal="false">
      <edit-menu v-if="editMenuVisible" :edit-menu-info="editMenuInfo" @reset-menus="resetMenus" />
    </el-dialog>
  </div>
</template>

<script>
import { getAllMenus, statusMenu } from '@/api/menu'
import AddMenu from './components/AddMenu'
import EditMenu from './components/EditMenu'
export default {
  name: 'Menu',
  components: { AddMenu, EditMenu },
  props: {},
  data () {
    return {
      menus: [],
      columns: [
        { label: '菜单标题', prop: 'title', width: '260px' },
        { label: '菜单ID', prop: 'id', width: '70px' },
        { label: '菜单名称', prop: 'menu_name', width: '120px' },
        { label: '排序', prop: 'sort', width: '70px' },
        { label: '菜单类型', type: 'template', template: 'menu_type', width: '80px' },
        { label: 'icon', type: 'template', template: 'icon', width: '60px', align: 'center' },
        { label: '是否显示', type: 'template', template: 'status', width: '80px' },
        { label: '前端路由名称', prop: 'route_name', width: '100px' },
        { label: '前端路由路径', prop: 'route_path', width: '200px' },
        { label: '创建时间', prop: 'create_time', width: '150px' },
        { label: '操作', type: 'template', template: 'operating', width: '160px' }
      ],
      addMenuVisible: false,
      editMenuInfo: {},
      editMenuVisible: false
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getAllMenus()
  },
  mounted () {},
  methods: {
    getAllMenus: async function () {
      const res = await getAllMenus()
      if (res) {
        this.menus = res
      }
    },
    menuEdit: function (index, menuInfo) {
      this.editMenuInfo = menuInfo
      this.editMenuVisible = true
    },
    menuStatus: async function (menuInfo, status, text) {
      const confirm = await this.$confirm(`确定要 ${text} ${menuInfo.title} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { return true }).catch(() => { return false })
      if (confirm) {
        const data = {
          id: menuInfo.id,
          status: status
        }
        const res = await statusMenu(data)
        if (res) {
          this.$message({ message: `${text}成功`, type: 'success', duration: 1000 })
          this.getAllMenus()
        }
      }
    },
    resetMenus: function () {
      this.addMenuVisible = false
      this.editMenuVisible = false
      this.getAllMenus()
    }
  }
}
</script>

<style scoped lang="scss">
.menu-container {
  color: var(--main-color);
  background-color: var(--main-bg-color);
  border-color: var(--main-bg-color);
  ::v-deep .el-card__body {
    .zk-table__body-wrapper {
      height: 580px !important;
      background-color: var(--main-bg-color);
    }
  }
}
</style>
